<template>
    <el-collapse @change="arrowDown=!arrowDown">
        <el-collapse-item>
            <template slot="title" :span="24">
                <el-col :span="2" style="text-align: center">
                    <i class="circle" :class="{bg_green:arrowDown,bg_orange:!arrowDown}"></i>
                </el-col>
                <el-col :span="1">
                    <img src="../../assets/Album-image.png" style="width: 40px;height: 40px;margin-top: 10px;" alt="">
                </el-col>
                <el-col :span="5">
                    <span class="fontSize_gray">Album Name(Default)</span>
                    <span class="fontSize_blue">江湖道</span>
                </el-col>
                <el-col :span="5">
                    <span class="fontSize_gray">Album Product ID</span>
                    <span class="fontSize_black">kwm1726364</span>
                </el-col>
                <el-col :span="6" style="text-align: right;">
                    <span class="fontSize_gray">Album Artist(Default)</span>
                    <span class="fontSize_black">洛天依，音阙诗听</span>
                </el-col>
                <el-col :span="4">
                    <i class="icon-ddex-edits"></i>
                    <span class="arrow" @click="arrowDown=!arrowDown">
                            <i class="icon-ddex-open fontSize_blue" v-show="arrowDown"></i>
                            <i class="icon-ddex-retract fontSize_blue" v-show="!arrowDown"></i>
                        </span>
                </el-col>
            </template>
            <!--partner-->
            <h3 class="border_bottom" :span="24">Partner</h3>
            <el-form :inline="true" :model="partner" style="margin-left: 60px;" label-width="150px" :span="24">
                <i class="star" style="margin-right: -68px;margin-left: -10px;">*</i>
                <el-form-item label="Supplier：">
                    <el-input v-model="partner.supplier"></el-input>
                </el-form-item>
                <i class="star" style="margin-right: -44px;margin-left: 30px;">*</i>
                <el-form-item label="Music Label：">
                    <el-input v-model="partner.musiclabel"></el-input>
                </el-form-item>
            </el-form>
            <div style="width: 100%;height: 10px;background-color: #F0F0F0;"></div>
            <!--album ids-->
            <h3>Album IDs</h3>
            <el-form :inline="true" :model="albumid" label-width="150px">
                <el-form-item label="Product ID：">
                    <el-input v-model="albumid.id"></el-input>
                </el-form-item>
                <el-form-item label="UPC：">
                    <el-input v-model="albumid.upc"></el-input>
                </el-form-item>
                <el-form-item label="Catalog Number：" style="margin-left: 40px;">
                    <el-input v-model="albumid.catalogno" placeholder="唱片公司发行的目录号码"></el-input>
                </el-form-item>
                <el-form-item label="GRID：">
                    <el-input v-model="albumid.grid" placeholder="Global Release Identifier"></el-input>
                </el-form-item>
                <el-form-item label="EAN：">
                    <el-input v-model="albumid.ean" placeholder="European Article Numbering"></el-input>
                </el-form-item>
                <el-form-item label="Proprietary Id：" style="margin-left: 40px;">
                    <el-input v-model="albumid.pid" placeholder="唱片公司特定的专有标识符"></el-input>
                </el-form-item>
            </el-form>
            <div style="width: 100%;height: 10px;background-color: #F0F0F0;"></div>
            <!--album name-->
            <h3>Album Name</h3>
            <el-col :span="24" style="margin-bottom: 16px;">
                <el-col :span="7" :offset="1" style="border: 1px solid #cddde5;">
                    <div class="album_icon">
                        <i class="icon-ddex-radioed icon_green"></i>
                        <span>Default</span>
                        <i class="triggle"></i>
                        <i class="el-icon-check icon_check"></i>
                    </div>
                    <el-form :model="albumname" label-width="140px">
                        <el-form-item label="Language：">
                            <el-input v-model="albumname.language"></el-input>
                        </el-form-item>
                        <el-form-item label="Title：">
                            <el-input v-model="albumname.title" placeholder="专辑（中文简体）副标题"></el-input>
                        </el-form-item>
                        <el-form-item label="Version Title：">
                            <el-input v-model="albumname.versiontitle" placeholder="江湖道"></el-input>
                        </el-form-item>
                        <el-form-item label="Description Title：">
                            <el-input v-model="albumname.destitle" placeholder="专辑（中文繁体）副标题"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="7" :offset="1" style="border: 1px solid #cddde5;">
                    <div class="album_icon">
                        <i class="icon-ddex-radioed icon_green"></i>
                        <span>Default</span>
                        <i class="triggle"></i>
                        <i class="el-icon-check icon_check"></i>
                    </div>
                    <el-form :model="albumname" label-width="140px">
                        <el-form-item label="Language：">
                            <el-input v-model="albumname.language"></el-input>
                        </el-form-item>
                        <el-form-item label="Title：">
                            <el-input v-model="albumname.title" placeholder="专辑（中文简体）副标题"></el-input>
                        </el-form-item>
                        <el-form-item label="Version Title：">
                            <el-input v-model="albumname.versiontitle" placeholder="江湖道"></el-input>
                        </el-form-item>
                        <el-form-item label="Description Title：">
                            <el-input v-model="albumname.destitle" placeholder="专辑（中文繁体）副标题"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="7" :offset="1" style="border: 1px solid #cddde5;">
                    <div class="album_icon">
                        <i class="icon-ddex-radioed icon_green"></i>
                        <span>Default</span>
                        <i class="triggle"></i>
                        <i class="el-icon-check icon_check"></i>
                    </div>
                    <el-form :model="albumname" label-width="140px">
                        <el-form-item label="Language：">
                            <el-input v-model="albumname.language"></el-input>
                        </el-form-item>
                        <el-form-item label="Title：">
                            <el-input v-model="albumname.title" placeholder="专辑（中文简体）副标题"></el-input>
                        </el-form-item>
                        <el-form-item label="Version Title：">
                            <el-input v-model="albumname.versiontitle" placeholder="江湖道"></el-input>
                        </el-form-item>
                        <el-form-item label="Description Title：">
                            <el-input v-model="albumname.destitle" placeholder="专辑（中文繁体）副标题"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-col>
            <div style="width: 100%;height: 10px;background-color: #F0F0F0;clear: both;"></div>
            <!--artist-->
            <el-form :inline="true" :model="artistone" label-width="150px" :span="24">
                <!--artist 1-->
                <h3>Album Artist</h3>
                <el-col :span="8">
                    <i class="star" style="margin-right: -58px;margin-left: 43px;">*</i>
                    <el-form-item label="Sequence：">
                        <!--<el-input v-model="artistone.sequence"></el-input>-->
                        <el-select v-model="artistone.sequence" style="width: 192px;">
                            <el-option label="1" value="1"></el-option>
                            <el-option label="2" value="2"></el-option>
                            <el-option label="3" value="3"></el-option>
                            <el-option label="4" value="4"></el-option>
                            <el-option label="5" value="5"></el-option>
                            <el-option label="6" value="6"></el-option>
                            <el-option label="7" value="7"></el-option>
                            <el-option label="8" value="8"></el-option>
                            <el-option label="9" value="9"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item label="Artist ID：">
                        <el-input v-model="artistone.artistid"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="ZH：">
                        <el-input v-model="artistone.zh"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="EN：">
                        <el-input v-model="artistone.en"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Pinyin：">
                        <el-input v-model="artistone.pinyin"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div style="width: 100%;height: 10px;background-color: #F0F0F0;clear: both;"></div>
            <!--artist 2-->
            <el-form :inline="true" :model="artisttwo" label-width="150px" :span="24">
                <h3>Album Artist</h3>
                <el-col :span="8">
                    <el-form-item label="Sequence：">
                        <!--<el-input v-model="artisttwo.sequence"></el-input>-->
                        <el-select v-model="artistone.sequence" style="width: 192px;">
                            <el-option label="1" value="1"></el-option>
                            <el-option label="2" value="2"></el-option>
                            <el-option label="3" value="3"></el-option>
                            <el-option label="4" value="4"></el-option>
                            <el-option label="5" value="5"></el-option>
                            <el-option label="6" value="6"></el-option>
                            <el-option label="7" value="7"></el-option>
                            <el-option label="8" value="8"></el-option>
                            <el-option label="9" value="9"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="ZH：" label-width="80px">
                        <i class="icon-ddex-radio" style="display: inline-block;"></i>
                        <span>Default</span>
                        <el-input v-model="artisttwo.zh"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Pinyin：" label-width="80px">
                        <i class="icon-ddex-radio"></i>
                        <span>Default</span>
                        <el-input v-model="artisttwo.pinyin"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div style="width: 100%;height: 10px;background-color: #F0F0F0;clear: both;"></div>
            <!--artist 3-->
            <el-form :inline="true" :model="artistthree" label-width="150px" :span="24">
                <h3 style="position: relative">Album Artist
                    <i class="icon-ddex-newsong icon_newsong"></i>

                </h3>
                <el-col :span="8">
                    <el-form-item label="Sequence：">
                        <!--<el-input v-model="artistthree.sequence"></el-input>-->
                        <el-select v-model="artistone.sequence" style="width: 192px;">
                            <el-option label="1" value="1"></el-option>
                            <el-option label="2" value="2"></el-option>
                            <el-option label="3" value="3"></el-option>
                            <el-option label="4" value="4"></el-option>
                            <el-option label="5" value="5"></el-option>
                            <el-option label="6" value="6"></el-option>
                            <el-option label="7" value="7"></el-option>
                            <el-option label="8" value="8"></el-option>
                            <el-option label="9" value="9"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="ZH：" label-width="80px">
                        <i class="icon-ddex-radio" style="display: inline-block;"></i>
                        <span>Default</span>
                        <el-input v-model="artistthree.zh"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Pinyin：" label-width="80px">
                        <i class="icon-ddex-radio"></i>
                        <span>Default</span>
                        <el-input v-model="artistthree.pinyin"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div style="width: 100%;height: 10px;background-color: #F0F0F0;clear: both;"></div>
            <!--album release detail-->
            <el-form :inline="true" :model="albumdetail" label-width="150px" :span="24">
                <h3>Album Release Details</h3>
                <el-col :span="8">
                    <i class="star" style="margin-right: -88px;margin-left: 76px;">*</i>
                    <el-form-item label="Genr：">
                        <!--<el-input v-model="albumdetail.genr"></el-input>-->
                        <el-select v-model="albumdetail.genr">
                            <el-option label="POP" value="pop"></el-option>
                            <el-option label="Rap" value="rap"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Language：">
                        <!--<el-input v-model="albumdetail.language"></el-input>-->
                        <el-select v-model="albumdetail.language">
                            <el-option label="ZH" value="中文"></el-option>
                            <el-option label="EN" value="英文"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <i class="star" style="margin-right: -52px;margin-left: 36px;">*</i>
                    <el-form-item label="Total Disks：">
                        <el-input v-model="albumdetail.totaldisks" placeholder="专辑发行地区"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Sub Genre：">
                        <!--<el-input v-model="albumdetail.language"></el-input>-->
                        <el-select v-model="albumdetail.subgenre">
                            <el-option label="Pop" value="pop"></el-option>
                            <el-option label="Rap" value="rap"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Territory：">
                        <!--<el-input v-model="albumdetail.language"></el-input>-->
                        <el-select v-model="albumdetail.territory">
                            <el-option label="CH" value="中国"></el-option>
                            <el-option label="TW" value="台湾"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Total Tracks：">
                        <el-input v-model="artistone.totaltracks"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="8">
                    <el-form-item label="Explicit：">
                        <el-select v-model="albumdetail.explicit">
                            <el-option label="N" value="n"></el-option>
                            <el-option label="Y" value="y"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Duration：">
                        <el-input v-model="artistone.duration"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div style="width: 100%;height: 10px;background-color: #F0F0F0;clear: both;"></div>
            <!--album trading detail-->
            <el-form :inline="true" :model="albumdetail" label-width="150px" :span="24">
                <h3>Album Trading Details</h3>
                <el-col :span="8">
                    <el-form-item label="CD Release Date：" style="margin-left: 4px;">
                        <el-input v-model="albumdetail.releasedate"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Start Date：">
                        <el-input v-model="albumdetail.startdate"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Is Exclusive：">
                        <el-select v-model="albumdetail.isexclusive">
                            <el-option label="N" value="n"></el-option>
                            <el-option label="Y" value="y"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Commercial Model：" label-width="154">
                        <el-input v-model="albumdetail.commodel"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="End Date：">
                        <el-input v-model="albumdetail.enddate" placeholder="授权日期结束"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Is MultiArtist Compilation：" label-width="250">
                        <el-select v-model="albumdetail.ismulti" style="width: 142px;">
                            <el-option label="N" value="n"></el-option>
                            <el-option label="Y" value="y"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="UseType：">
                        <el-input v-model="albumdetail.usetype"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div style="width: 100%;height: 10px;background-color: #F0F0F0;clear: both;"></div>
            <!--other-->
            <el-form :inline="true" :model="other" label-width="150px" :span="24">
                <h3>Other</h3>
                <el-col :span="8">
                    <el-form-item label="Keywords：">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="other.keyword" placeholder="专辑关键词" style="width: 194px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Synopsis：">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="other.synopsis" placeholder="专辑简介" style="width: 194px;"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div style="width: 100%;height: 10px;background-color: #F0F0F0;clear: both;"></div>
            <el-col :span="13" :offset="11" style="margin-top: 16px;margin-bottom: 16px;">
                <el-button type="primary" style="width: 140px;height: 44px;font-size: 20px;">
                    <i class="icon-ddex-save" style="margin-right: 10px;line-height: 24px;"></i>
                    <span>Save</span>
                </el-button>
            </el-col>
        </el-collapse-item>
    </el-collapse>
</template>
<script>
export default {
    data() {
        return {
            arrowDown: true,
            //                form: {
            //                    materialno: '',
            //                    creater: '',
            //                    createtime: '',
            //                    uploadtime: '',
            //                    modifier: '',
            //                    modifytime: '',
            //                    totalaudiofile: '',
            //                    totallyricsfile: '',
            //                    albumfile: ''
            //                },
            partner: {
                "supplier": "QQ",
                "musiclabel": "千和世纪"
            },
            albumid: {
                "id": "11",
                "upc": "123456",
                "catalogno": "",
                "grid": "",
                "ean": "",
                "pid": ""
            },
            albumname: {
                "language": "ZH",
                "title": "",
                "versiontitle": "",
                "destitle": ""
            },
            artistone: {
                "sequence": "",
                "artistid": "",
                "zh": "",
                "en": "",
                "pinyin": "",
            },
            artisttwo: {
                "sequence": "",
                "zh": "",
                "pinyin": "",
            },
            artistthree: {
                "sequence": "",
                "zh": "",
                "pinyin": "",
            },
            albumdetail: {
                "genr": "",
                "language": "",
                "totaldisks": "",
                "subgenre": "",
                "Territory": "",
                "totaltracks": "",
                "explicit": "",
                "duration": "",
                "releasedate": "",
                "startdate": "",
                "isexclusive": "",
                "commodel": "",
                "enddate": "",
                "ismulti": "",
                "usetype": ""
            },
            other: {
                "keyword": "",
                "synopsis": "",
            }
        }
    },
    methods: {},
}
</script>
<style scoped lang="less" rel="stylesheet/less">
@borderColor: #CDDDE5; //绿色圆圈
.circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 20px;
    border-radius: 50%;
    margin-bottom: 8px;
} //右侧按钮
.arrow {
    display: inline-block;
    width: 80px;
    height: 30px;
    line-height: 34px;
    margin-top: 15px;
    border-radius: 20px;
    background-color: #def3fd;
    float: right;
    text-align: center;
} //编辑按钮
.icon-ddex-edits {
    color: green;
    background: #d8f2da;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    margin-left: 70px;
    font-size: 17px;
}

.album_icon {
    position: relative;
    height: 70px;
    .icon_green {
        font-size: 20px;
        line-height: 70px;
        margin-left: 100px;
        color: #3bb647;
        margin-right: 10px;
    }
    .triggle {
        width: 0px;
        height: 0px;
        border-top: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-left: 30px solid #3bb647;
        position: absolute;
        top: -30px;
        right: -30px;
        transform: rotate(-45deg);
    }
    .icon_check {
        position: absolute;
        top: 8px;
        right: 4px;
        color: #fff;
    }
} //新歌图表
.icon_newsong {
    color: #3bb647;
    font-size: 20px;
    display: inline-block;
    position: absolute;
    right: 66px;
}

.el-form {
    .el-form-item {
        .el-select {
            width: 192px;
        }
    }
}

.bg_white {
    background-color: #fff;
}

.marginT {
    margin-top: 10px;
}

.marginB {
    margin-bottom: 2px;
}

.border_bottom {
    border-bottom: 4px solid #fff;
}

.fontSize_gray {
    font-size: 14px;
    color: #999999;
    padding-right: 10px;
}

.fontSize_blue {
    font-size: 18px;
    font-weight: bold;
    color: #0b9eea;
}

.fontSize_black {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
</style>